<template>
  <div>
          <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
    <el-row>
        <el-col :span=4><el-button type="primary" @click="adFormVisible = true">添加角色</el-button></el-col>
    </el-row>
    <el-table
    :data="rolesList"
    stripe
    style="width: 100%">
    <el-table-column type="expand">
         <template slot-scope="scope">
             <el-row :class="['bottom1', i === 0 ? 'top1' : '', 'center1']" :gutter="20" :key="item.id" v-for="(item, i) in scope.row.children">
                 <!-- 一级权限 -->
                 <el-col :span="5"><el-tag @close="closes(scope.row, item.id)" closable effect="dark" >{{item.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col>
                 <!-- 二级权限 -->
                 <el-col :span="19">
                     <el-row :class="[i1 === 0 ? '' : 'top1', 'center1']" :key="item1.id" v-for="(item1, i1) in item.children">
                         <el-col :span="6"><el-tag  @close="closes(scope.row, item1.id)" closable effect="dark"  type="success">{{item1.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col>
                         <!-- 三级权限 -->
                         <el-col :span="18">
                             <el-tag  @close="closes(scope.row, item2.id)" closable :class="[i2 === 0 ? '' : 'top1']" effect="dark" type="warning" :key="item2.id" v-for="(item2, i2) in item1.children">{{item2.authName}}</el-tag>
                         </el-col>
                     </el-row>
                 </el-col>
             </el-row>
         </template>
    </el-table-column>
    <el-table-column type="index"></el-table-column>
    <el-table-column
      prop="roleName"
      label="角色名称">
    </el-table-column>
    <el-table-column
      prop="roleDesc"
      label="角色描述">
    </el-table-column>
    <el-table-column
      label="操作">
        <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="jsbjForm(scope.row.id)">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="jsscForm(scope.row.id)">删除</el-button>
        <el-button type="warning" icon="el-icon-setting" size="mini" @click="qxForm(scope.row)">分配权限</el-button>
      </template>
    </el-table-column>
    </el-table>
    </el-card>

    <!-- 添加角色对话框 -->
<el-dialog title="添加角色" :visible.sync="adFormVisible" width="50%" @close="guanbi">
  <el-form label-width="80px"  :model="tjForm" :rules="ruless"  ref="adFormRef">
    <el-form-item label="角色名称"  prop="roleName">
    <el-input v-model="tjForm.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="tjForm.roleDesc"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="guanbi">取 消</el-button>
    <el-button type="primary" @click="tjbtn()">确 定</el-button>
  </div>
</el-dialog>

   <!-- 编辑角色对话框 -->
<el-dialog title="编辑角色" :visible.sync="bjFormVisible" width="50%" @close="guanbi1">
  <el-form label-width="80px"  :model="bjForm" :rules="ruless"  ref="bjFormRef">
    <el-form-item label="角色名称"  prop="roleName">
    <el-input v-model="bjForm.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="bjForm.roleDesc"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="guanbi1">取 消</el-button>
    <el-button type="primary" @click="bjbtn()">确 定</el-button>
  </div>
  </el-dialog>

    <!-- 权限管理对话框 -->
<el-dialog title="权限管理" :visible.sync="qxFormVisible" width="50%" @close="guanbi2">
  <el-tree ref="qxRef" default-expand-all :default-checked-keys="zkaiArr" node-key="id" :data="qxformData" show-checkbox :props="qxProps"></el-tree>
  <div slot="footer" class="dialog-footer">
    <el-button @click="guanbi2">取 消</el-button>
    <el-button type="primary" @click="qxbtn()">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rolesList: [],
      ruless: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '角色名称在3~10个字符之间',
            trigger: 'blur'
          }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '角色描述在1~15个字符之间',
            trigger: 'blur'
          }
        ]
      },
      tjForm: {
        // roleId: '',
        // roleName: '',
        // roleDesc: ''
      },
      adFormVisible: false,
      bjForm: {},
      bjFormVisible: false,
      qxformData: {},
      qxProps: {
        children: 'children',
        label: 'authName'
      },
      zkaiArr: [],
      qxId: '',
      qxFormVisible: false
    }
  },
  created () {
    this.getRolesList()
  },
  methods: {
    async getRolesList () {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return this.$message.error('获取角色列表失败')
      this.rolesList = res.data
    //   console.log(res.data)
    },
    async closes (roles, id) {
      const result1 = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (result1) {
        const { data: res } = await this.$http.delete(`roles/${roles.id}/rights/${id}`)
        if (res.meta.status !== 200) return this.$message.error('删除角色权限失败')
        roles.children = res.data
      }
    },
    tjbtn () {
      this.$refs.adFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请填写完整角色信息')
        const { data: res } = await this.$http.post('roles', this.tjForm)
        if (res.meta.status !== 201) return this.$message.error('添加角色失败')
        this.adFormVisible = false
        this.getRolesList()
        this.$message.success('修改用户信息成功')
      }
      )
    },
    guanbi () {
      this.$refs.adFormRef.resetFields()
      this.adFormVisible = false
    },
    async jsbjForm (id) {
      this.bjFormVisible = true
      const { data: res } = await this.$http.get('roles/' + id)
      if (res.meta.status !== 200) return this.$message.error('编辑角色信息获取失败')
      this.bjForm = res.data
    },
    bjbtn () {
      this.$refs.bjFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请填写完整角色信息')
        const { data: res } = await this.$http.put('roles/' + this.bjForm.roleId, { roleName: this.bjForm.roleName, roleDesc: this.bjForm.roleDesc })
        if (res.meta.status !== 200) return this.$message.error('编辑角色失败')
        this.bjFormVisible = false
        this.getRolesList()
        this.$message.success('编辑角色信息成功')
      }
      )
    },
    guanbi1 () {
      this.$refs.bjFormRef.resetFields()
      this.bjFormVisible = false
    },
    async jsscForm (id) {
      const result1 = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (result1) {
        const { data: res } = await this.$http.delete(`roles/${id}`)
        if (res.meta.status !== 200) return this.$message.error('删除角色失败')
        this.getRolesList()
      }
    },
    async qxForm (roles) {
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) return this.$message.error('获取权限列表失败')
      this.qxformData = res.data
      this.qxId = roles.id
      this.zkaiArrDigui(roles, this.zkaiArr)
      this.qxFormVisible = true
    },
    zkaiArrDigui (data, arr) {
      if (!data.children) return arr.push(data.id)
      data.children.forEach(item => {
        this.zkaiArrDigui(item, arr)
      })
    },
    guanbi2 () {
      this.zkaiArr = []
      this.qxFormVisible = false
    },
    async qxbtn () {
      const qxtjArr = [
        ...this.$refs.qxRef.getCheckedKeys(),
        ...this.$refs.qxRef.getHalfCheckedKeys()]
      const rids = qxtjArr.join(',')
      console.log(rids + this.qxId)
      const { data: res } = await this.$http.post(`roles/${this.qxId}/rights`, { rids: rids })
      if (res.meta.status !== 200) return this.$message.error('更新权限列表失败')
      this.$message.success('更新权限列表成功')
      this.getRolesList()
      this.qxFormVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.top1 {
    border-top: 1px solid #eee;
}
.bottom1 {
    border-bottom: 1px solid #eee;
}
.el-tag {
    margin: 7px;
}
.center1 {
    display: flex;
    align-items: center;
}

</style>
